import React from 'react';
import styles from './style';
import { View, SafeAreaView, Image, Text, TouchableOpacity, ScrollView } from 'react-native';
import * as Animatable from 'react-native-animatable';
import Back from '../../../../common/component/back';
import { FlatList } from 'react-native-gesture-handler';
import AsyncStorage from '@react-native-async-storage/async-storage';
// const downImg = require('../../img/downImg.png');
const time = require('../../../../common/img/date.png');

export default class DownLoad extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                // { id: '1', img: downImg, name: '昏黄的阳光', time: '2021-01-21' },
                // { id: '2', img: downImg, name: '昏黄的阳光', time: '2021-01-21' },
                // { id: '3', img: downImg, name: '昏黄的阳光', time: '2021-01-21' },
            ],
            date: new Date(),
            timeShow: false,
        };
    }
    componentDidMount() {
        // setTimeout(() => {
        this.getData();
        // }, 50);
    }
    getData = async () => {
        let downHistory = await AsyncStorage.getItem('downHistory');
        downHistory = downHistory ? JSON.parse(downHistory) : [];
        console.log(downHistory);
        this.setState({
            list: downHistory,
        });
    };
    rederItem = ({ item, index }) => {
        return (
            <TouchableOpacity
                key={index}
                onPress={() =>
                    this.props.navigation.navigate('FindDetail', {
                        img: { uri: item.url },
                        status: true,
                        _id: item._id,
                    })
                }
            >
                <View style={styles.fansStyle}>
                    <Animatable.View animation="slideInUp" style={[{ flexDirection: 'row' }]}>
                        <Image source={{ uri: item.url }} style={styles.fansImg} />
                        <View style={styles.nameStyle}>
                            <Text style={styles.topText}>{item.title}</Text>
                            <Text style={styles.bottomText}>下载时间{item.createAt}</Text>
                        </View>
                    </Animatable.View>
                </View>
            </TouchableOpacity>
        );
    };
    render() {
        let { navigation, route } = this.props;
        let { list } = this.state;

        return (
            <SafeAreaView style={styles.fans}>
                <Back navigation={navigation} />
                <View style={[{ flexDirection: 'row' }]}>
                    <Text style={styles.fansText}>历史下载</Text>
                    <View style={[{ marginLeft: 'auto', marginRight: 20, marginTop: 22 }]}>
                        <TouchableOpacity onPress={() => {}}>
                            <Image source={time} style={{ width: 24, height: 24 }} />
                        </TouchableOpacity>
                    </View>
                </View>
                <FlatList data={list} renderItem={this.rederItem} />
            </SafeAreaView>
        );
    }
}
